<template>
    <NConfigProvider :locale="zhCN" :theme="getDarkTheme" :theme-overrides="getThemeOverrides" :date-locale="dateZhCN">
        <AppProvider>
            <router-view />
        </AppProvider>
    </NConfigProvider>
</template>

<script setup lang="ts">
import AppProvider from "@/components/Application/Index.vue"
import { useThemeStore } from "./store/modules/theme"
import { storeToRefs } from "pinia"
import { NConfigProvider, zhCN, dateZhCN, darkTheme } from "naive-ui"
import { brightenColor } from "./utils"

const themeStore = useThemeStore()
const { setting } = storeToRefs(themeStore)

const getDarkTheme = computed(() => (setting.value?.dark ? darkTheme : undefined))

const getThemeOverrides = computed(() => {
    const theme = setting.value?.theme ?? ""
    const lightenStr = brightenColor(theme)
    return {
        common: {
            primaryColor: theme,
            primaryColorHover: lightenStr,
            primaryColorPressed: lightenStr,
            primaryColorSuppl: theme
        },
        LoadingBar: {
            colorLoading: theme
        }
    }
})
</script>

<style lang="less">
@import "assets/less/index.less";
</style>
